﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Text</title>
    <style>
        .active {
            color: red;
        }
        .static {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <p>过滤器：{{message | myFilter}}</p>
    <p>计算属性：{{reMessage}}</p>
    <p v-if="seen">if展示</p>
    <p v-if="age>30">年龄大于30</p>
    <p>姓名：<input type="text" v-model="myName"/></p>
    <p>年龄：<input type="number" v-model.number="age"/></p>
    <p v-bind:class="{active:myClass, static:myClass}">{{name}} {{age}}</p>
    <p>单选框使用</p>
    <input id="boy" type="radio" value="男" v-model="sex"/><label for="boy">男</label>
    <input id="gril" type="radio" value="女" v-model="sex"/><label for="gril">女</label>
    <p>多选框</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">taobao</label>
    <p><span>选择的值为：{{checkedNames}}</span></p>
    <p>select</p>
    <select v-model="selected">
        <option value="">请选择</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
    </select>
    <p><span>选择的网站是：{{selected}}</span></p>
</div>
<script src="~/Resources/mainFrame/js/vue/vue.2.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
    var vm = new Vue({
        el: '#app',
        //数据
        data: {
            sex:'男',
            myClass:true,
            message: 'Hello World!',
            seen: true,
            age: 25,
            name: '张三',
            selected:'',
            checkedNames: []
        },
        //计算属性
        computed: {
            reMessage: function() {
                return this.message.split('').reverse().join('');
            },
            myName: {
                get:function() {
                    return this.name;
                },
                set:function(value) {
                    this.name = value;
                }
            }
        },
        //监视变化
        watch: {
            name:function(val,oldVal) {
                alert("新值：" + val + " 旧值：" + oldVal);
            }
        },
        //过滤器
        filters: {
            myFilter:function(str) {
                return str.split('').reverse().join('');
            }
        }
    });
</script>
</body>
</html>
